﻿<%@ page language="C#" autoeventwireup="true" inherits="Default_ProductDetail, App_Web_e1jp1m1s" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="shortcut icon" href="../Images/favicon.ico" type="image/x-icon" />
    <%=MainCss%>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/swipe.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
        
	<link href="css/photoswipe.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/klass.min.js"></script>
    <script type="text/javascript" src="js/code.photoswipe-3.0.5.min.js"></script>
    
	<script type="text/javascript">

	    $(window).scroll(function () {
	        if ($(window).scrollTop() > 200) {
	            $('#GoTop').show();
	        }
	        else {
	            $('#GoTop').hide();
	        }
	    });

	    $(document).ready(function () {

	        $('#GoTop').click(function () { $('html, body').animate({ scrollTop: 0 }, 'slow'); });

	        try {
	            var myPhotoSwipe = $(".gallery a").photoSwipe({ allowUserZoom: true });
	        }
	        catch (e) {

	        }

	        //判断是否微信内置浏览器
	        var ua = navigator.userAgent.toLowerCase();
	        if (ua.match(/MicroMessenger/i) == "micromessenger") {
	            document.getElementById('Download_AppDownload').style.display = 'block';
	            return true;
	        }
	        else {
	            return false;
	        }
	    });

        function btnPhone(number){  
            window.location.href = 'tel:'+number;
        } 
        
        function getMore(url)
        {
            window.location.href = url;
        }
        
        function addCart(id)
        {
            window.location.href='AddToCart.aspx?id='+id+'&qty=1';
        }

        function btnImage(url){  
            window.location.href = 'Image.aspx?url='+url;
        } 

        function btnShare(title, url, text, imgPath) {
            var u = navigator.userAgent, app = navigator.appVersion;
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isiOS) {
                try { var share = "share?title=" + title + "&url=" + base64Encode(url) + "&text=" + text + "&imgPath=" + base64Encode(imgPath); var iframe = document.createElement("iframe"); iframe.src = "showShare://" + share; iframe.style.display = 'none'; document.body.appendChild(iframe); iframe.parentNode.removeChild(iframe); iframe = null; } catch (e) { }
            }
            else {
                try { var obj = window.JavaObj; obj.showShare("", title, url, text, imgPath); } catch (e) { }
            }
        }

        function wvGoBack() {
            try
            {
                var obj = window.JavaObj;
                obj.wvGoBack();
            }
            catch(e)
            {
                history.back();
            }
        }

	</script>
	
	<style type="text/css">
	    .content{ padding:10px 0;}
	    .big { font-size:18pt;}
        .buttoncss{ width:100px; border:0px; padding:10px; color:#fff;}
        .showtime{font-size:8pt; font-weight:normal;}
        .num{float:left; font-size:20pt; padding-left:5px; color:#FCFCFC;}
        .item_tb td{border:0px; padding:10px 0px;}
        .item_name{font-weight:700; font-size:9pt; width:30px;}
        .item_desc{text-align:left;color:#999; font-size:10pt;}

        .minus-plus{border:solid 1px #ddd; overflow:auto}
        .minus-plus .minus{float:left; border-right:solid 1px #ddd;}
        .minus-plus .plus{float:right; border-left:solid 1px #ddd;}
        .minus-plus .text{width:40px; border:0px; height:30px; font-size:11pt; color:#999; text-align:center}
	    .minus-plus a {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #fff;
            font-size: 16pt;
            color: #999;
	    }

        .att {
            float: left;
            border: solid 1px #eee;
            padding: 5px;
            margin: 5px;
            border-radius:3px;
            background:#eee;
        }

        .att-cur {
            float: left;
            border: solid 1px #FF4D00;
            padding: 5px;
            margin: 5px;
            border-radius:3px;
            background:#FFF5F3;
        }

        .att-cur a{color:#FF4D00}
        .com_item{padding:10px;}
        .com_date{color:#999;}
        .com_info{padding:5px 0px;}
        .com_info{font-size:12pt; color:#000; padding:5px 0px;}
        .com_reply{padding:10px; border:solid 1px #eee; background:#eee; border-radius:5px; color:#663300}
        .com_reply .com_rightDate{color:#999; text-align:right; font-style: italic; padding-top:10px;}
	</style>
    
</head>

<body>

<form id="form1" runat="server">

    <asp:ScriptManager id="ScriptManager1"  runat="server"></asp:ScriptManager>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
    
            <script src="js/updatepanel.js" type="text/javascript"></script>
            
            <asp:TextBox ID="txtHidden" runat="server" style="display:none;" Text="0"></asp:TextBox>

    
            <div class="index_wrapper">
      
                <header>

                    <div class="topbar">
                        <a href="javascript:history.back(-1)" class="back_btn"><i class="icon iconfont">&#xf0115;</i></a>
                        <a href="javascript:openMore()" class="top_home"><i class="icon iconfont">&#xf0112;</i></a>
                        <h1 class="page_title"><asp:Label ID="lblTitle" runat="server"></asp:Label></h1>
                    </div>

                </header>

                <div id="ImgDiv" runat="server"></div>
    
                <script type="text/javascript">
                    $(function() {
                        new Swipe(document.getElementById('banner_box'), {
                            callback: function() {
                                var lis = $(this.element).next("ol").children();
                                lis.removeClass("on").eq(this.index).addClass("on");
                            }
                        });
                    });

                    function openBuy() {
                        document.getElementById('shut1').style.display = "";
                        $("#div1").stop(true, true).animate({ 'height': '510px' }, 200);
                    }

                    function closeBuy()
                    {
                        $("#div1").stop(true, true).animate({ 'height': '0px' }, 200);
                        document.getElementById('shut1').style.display = "none";
                    }

                    function openMore() {
                        document.getElementById('shut2').style.display = "";
                        $("#div2").stop(true, true).animate({ 'height': '140px' }, 200);
                    }

                    function closeMore() {
                        $("#div2").stop(true, true).animate({ 'height': '0px' }, 200);
                        document.getElementById('shut2').style.display = "none";
                    }

                    function add() {
                        var qty = document.getElementById('txtQty').value;
                        qty++;
                        document.getElementById('txtQty').value = qty;
                    }

                    function reduce() {
                        var qty = document.getElementById('txtQty').value;
                        qty--;
                        if (qty > 0) {
                            document.getElementById('txtQty').value = qty;
                        }
                    }

                    function selectItem(index1, index2, len) {
                        for (i = 0; i < len; i++) {
                            $('#item' + index1 + "_" + i).removeClass();
                            if (i == index2) {
                                $('#item' + index1 + "_" + i).addClass("att-cur");
                            }
                            else {
                                $('#item' + index1 + "_" + i).addClass("att");
                            }
                        }

                        var str = "";
                        var div = document.getElementById("AttDiv").getElementsByClassName("att-cur");
                        for (i = 0; i < div.length; i++) {
                            str += div[i].innerText + ",";
                        }
                        if (str != "") {
                            str = str.substring(0, str.length - 1);
                        }
                        document.getElementById('txtAtt').value = str;
                    }

                </script>

                <div class="pro_info">

                    <div style="padding:0 10px; font-size:16pt; color:#FC4F02;">
                        <asp:Label ID="lblPrice" runat="server"></asp:Label>
                    </div>

                    <div style="padding:10px;">
                        <asp:Label ID="lblProductName" runat="server" style="font-size:11pt; font-weight:700"></asp:Label>
                    </div>

                    <div id="Subtitle" runat="server" style="clear:both; overflow:hidden; padding:0px 10px 10px 10px; color:#999"></div>
        
                    <div id="Attribute" runat="server"></div>
    
                    <div id="CommentWrap" runat="server">
                        
                        <div class="item_clear"></div>
         
                        <div class="item_wrap">
                            
                            <div class="item_title">
                                评论
                                <asp:HyperLink ID="hlMoreComment" runat="server" CssClass="right" style="margin-right:10px;"><i class="iconfont">&#xf0116;</i></asp:HyperLink>
                            </div>
                        
                            <div id="CommentDiv" runat="server" style="padding:0px 5px;"></div>
    
                        </div>

                    </div>
         
                    <div class="item_clear"></div>
         
                    <div class="item_wrap">
                        <div class="item_title">
                            描述
                        </div>
                        <div class="item_content">
                            <asp:Label ID="lblDesc" runat="server"></asp:Label>
                        </div>
                    </div>
            
                </div>
    
            </div>

            <div style="text-align:center; position:fixed; bottom:0px; background:#fff; width:100%; height:50px">
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>

                        <table style="width:100%;border:0;margin:0;border-collapse:collapse;border-spacing:0;">
                            <tr>
                                <td style="text-align:center; border-top:solid 1px #eee; padding-top:2px;">
                                    <a href="Product.aspx" style="color:#666; font-size:8pt"><i class="icon iconfont" style="font-size:15pt">&#xf00eb;</i><br />橱窗</a>
                                </td>
                                <td style="text-align:center; border-top:solid 1px #eee; padding-top:2px;">
                                    <asp:LinkButton ID="lnbMsg" runat="server" style="color:#666; font-size:8pt" OnClick="lnbMsg_Click"><i class="icon iconfont" style="font-size:15pt">&#xf016c;</i><br />客服</asp:LinkButton>
                                </td>
                                <td style="text-align:center; border-top:solid 1px #eee; padding-top:2px;">
                                    <asp:LinkButton ID="lnbFav" runat="server" style="color:#666; font-size:8pt;" OnClick="lnbFav_Click"></asp:LinkButton>
                                </td>
                                <td style="width:105px; border-top:solid 1px #eee;">
                                    <a href="javascript:openBuy()" class="add_cart"  style="width:100px; line-height:40px; height:40px; margin:0; background-image: linear-gradient(to right, #FFC801 , #FF9604); border-radius:0px; font-size:11pt; border-radius:50px; margin-top:3px;">加入购物车</a>
                                </td>
                                <td style="width:105px; border-top:solid 1px #eee;">
                                    <a href="javascript:openBuy()" class="add_cart"  style="width:100px; line-height:40px; height:40px; margin:0; background-image: linear-gradient(to right, #F20401 , #FD4715); border-radius:0px; font-size:11pt; border-radius:50px; margin-top:3px;">立即购买</a>
                                </td>
                            </tr>
                        </table>
            
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
 
            <div id="shut1" class="edit-shut" style="display:none;" onclick="closeBuy()"></div>
            <div id="div1" style="position:fixed; bottom:0px; height:0px; z-index:101; background:#fff; width:100%">

                <div id="title1" class="edit-title"><asp:Label ID="lblProductName1" runat="server"></asp:Label><a href="javascript:closeBuy();" style="float:right; color:#ccc; margin-right:10px;"><i class="icon iconfont">&#xf012a;</i></a></div>
                
                <div style="height:110px; overflow:hidden">
                    <table style="width:100%">
                        <tr>
                            <td style="width:90px; padding:10px;">
                                <asp:Image ID="imgSmall" runat="server" style="width:80px; height:80px; border-radius:5px; border:solid 1px #eee;" />
                            </td>
                            <td>
                                <div style="font-size:16pt; color:#F20401">
                                    <span style="font-size:8pt; margin-right:5px;">￥</span><asp:Label ID="lblPrice1" runat="server"></asp:Label>
                                </div>
                                <div style="font-size:10pt; color:#999; padding-top:5px; line-height:1.6em">
                                    <asp:Label ID="lblSubtitle" runat="server"></asp:Label>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

                <div style="margin:0; height:310px;overflow-y:scroll">

                    <div id="AttDiv" runat="server"></div>
                    
                    <asp:TextBox ID="txtAtt" runat="server" style="display:none"></asp:TextBox>

                    <div style="padding:10px; border-top:solid 1px #F4F4F4;">
                        <table style="width:100%;border:0;margin:0;border-collapse:collapse;border-spacing:0;">
                            <tr>
                                <td>
                                    <span style="font-size:11pt; color:#333;">购买数量</span>
                                    <asp:Label ID="lblQty" runat="server" style="font-size:10pt; color:#999; margin-left:10px;"></asp:Label>
                                </td>
                                <td style="width:105px;">

                                    <div class="minus-plus">
                                        <a href="javascript:reduce();" class="minus">-</a>
                                        <asp:TextBox ID="txtQty" runat="server" CssClass="text" AutoComplete="off" Text="1"></asp:TextBox>
                                        <a href="javascript:add();" class="plus">+</a>
                                    </div>

                                </td>
                            </tr>
                        </table>
                    </div>

                </div>

                <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        
                        <div style="overflow:hidden">
                            <div style="float:left; width:50%">
                                <asp:LinkButton ID="lnbAddCart" runat="server" CssClass="add_cart" style="width:100%; line-height:50px; height:50px; margin:0; border-radius:0px; background-image: linear-gradient(to right, #FFC801 , #FF9604);" OnClick="lnbAddToCart_Click">加入购物车</asp:LinkButton>
                            </div>
                            <div style="float:left; width:50%">
                                <asp:LinkButton ID="lnbBuy" runat="server" CssClass="add_cart" style="width:100%; line-height:50px; height:50px; margin:0; border-radius:0px; background-image: linear-gradient(to right, #F20401 , #FD4715);" OnClick="lnbBuy_Click">立即购买</asp:LinkButton>
                            </div>
                        </div>

                    </ContentTemplate>
                </asp:UpdatePanel>

            </div>
        
            <div id="shut2" class="edit-shut" style="display:none;" onclick="closeMore()"></div>
            <div id="div2" style="position:fixed; bottom:0px; height:0px; z-index:101; background:#fff; width:100%">
                <div id="title2" class="edit-title">更多操作<a href="javascript:closeMore();" style="float:right; color:#ccc; margin-right:10px;"><i class="icon iconfont">&#xf012a;</i></a></div>
                <div class="edit-content" style="margin:0; padding:10px;">
        
                    <nav class="index_nav">

                        <div class="index_menu flex">
                            <a href="Default.aspx"><i class="iconfont" style="background: #E14F4F;">&#xf01d5;</i><span>首页</span></a>
                            <asp:HyperLink ID="hlShare" runat="server" CssClass="fancybox fancybox.image" ToolTip="长按图片保存到相册"><i class="iconfont" style="background: #07C160;">&#xf0106;</i><span>分享</span></asp:HyperLink>
                            <asp:HyperLink ID="hlComment" runat="server"><i class="iconfont" style="background: #F38A56;">&#xe779;</i><span>评论</span></asp:HyperLink>
                            <a href="QA.aspx"><i class="iconfont" style="background: #8D7FFB;">&#xf006d;</i><span>帮助</span></a>
                            <a href="Member.aspx"><i class="iconfont" style="background: #F1658E;">&#xf0183;</i><span>我的</span></a>
                        </div>
        
                    </nav>
            
                </div>
            </div>
      
            <div id="attention-dialog" class="attention-layout"></div>

            <div id="GoTop"></div>
         
         </ContentTemplate>
    </asp:UpdatePanel>
            
    <script type="text/javascript" src="js/Fancybox/jquery.fancybox.js?v=2.1.5"></script>
	<link rel="stylesheet" type="text/css" href="js/Fancybox/jquery.fancybox.css?v=2.1.5" media="screen" />
    <script type="text/javascript">
        $(document).ready(function () {
            $(".fancybox").fancybox({
            });
        });
	</script>

</form>
 
</body>

</html>
